<template>
  <div class="container">
    <div @click="goToVideo()">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix card-header">
          <span>学习</span>
        </div>
        <div v-for="video in videoList" :key="video.id" class="text item">
          {{ video.name }}
        </div>
      </el-card>
    </div>

    <div @click="goToTest()">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix card-header">
          <span>考试</span>
        </div>
        <div v-for="exams in s_examList" :key="exams.id" class="text item">
          {{ exams.examName }}
        </div>
      </el-card>
    </div>

    <div @click="goToWork()">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix card-header">
          <span>作业</span>
        </div>
        <div v-for="homeworks in s_homeworkList" :key="homeworks.id" class="text item">
          {{ homeworks.homeworkName }}
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { listS_exam } from "@/api/course/s_exam";
import { listS_homework } from "@/api/course/s_homework";
import { listVideoByCId } from "@/api/course/video";

export default {
  data() {
    return {
      cId: null,
      videoList: [
        {id: 1, name: "JavaScript代码作业"},
        {id: 2, name: "Vue.js项目作业"},
        {id: 3, name: "前端性能优化实践"}
      ],
      s_examList: [
        {id: 1, name: "JavaScript代码作业"},
        {id: 2, name: "Vue.js项目作业"},
        {id: 3, name: "前端性能优化实践"}
      ],
      s_homeworkList: [
        {id: 1, name: "JavaScript代码作业"},
        {id: 2, name: "Vue.js项目作业"},
        {id: 3, name: "前端性能优化实践"}
      ]
    };
  },
  created() {
    this.cId = this.$route.query.cId;
    console.log('接收到的课程ID:', this.cId);
    this.getVideoList();
    this.getExamList();
    this.getHomeworkList();
  },
  methods: {
    getVideoList() {
      this.loading = true;
      listVideoByCId(this.cId)
        .then(response => {
          this.videoList = response.data;
          this.total = response.total;
          this.loading = false;
        })
        .catch(error => {
          console.error('获取视频列表失败:', error);
          this.loading = false;
        });
    },

    getExamList() {
      this.loading = true;
      listS_exam(this.queryParams).then(response => {
        this.s_examList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getHomeworkList() {
      this.loading = true;
      listS_homework(this.queryParams).then(response => {
        this.s_homeworkList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    goToVideo() {
      console.log('跳转到视频');
      const cId = this.$route.query.cId;
      this.$router.push({path: '/course/video2/', query: {cId: cId}});
    },
    goToTest() {
      console.log('跳转到考试');
      const cId = this.$route.query.cId;
      this.$router.push({path: '/course/s_exam/', query: {cId: cId}});
    },
    goToWork() {
      console.log('跳转到作业');
      const cId = this.$route.query.cId;
      this.$router.push({path: '/course/s_homework/', query: {cId: cId}});
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
}

.card-header {
  font-weight: bold;
  font-size: 24px;
  color: #409EFF;
  padding: 10px;
  background-color: #f4f7fa;
  border-radius: 10px 10px 0 0;
}

.text {
  font-size: 18px;
  color: #555;
}

.item {
  margin-bottom: 18px;
  text-align: left;
}

.box-card {
  width: 430px;
  height: 350px;
  line-height: 35px;
  text-align: center;
  font-size: 28px;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
}

.box-card .text {
  font-size: 22px;
  text-align: center;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.clearfix {
  font-weight: 700;
  font-size: 35px;
  height: 68px;
  line-height: 50px;
}

@media (max-width: 1200px) {
  .container {
    flex-direction: column;
    align-items: center;
  }

  .box-card {
    width: 90%;
    height: 280px;
  }
}

@media (max-width: 768px) {
  .box-card {
    width: 100%;
    height: auto;
  }
}
</style>
